<template>
  <div>
    <!-- 查询条件 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="游戏">
        <el-select v-model="formInline.gametyp" placeholder="请选择游戏">
          <el-option label="扫雷" value="扫雷"></el-option>
          <el-option label="测试游戏类型" value="测试游戏类型"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" type="primary" @click="onSearch">查询</el-button>
        <el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 分数表格 -->
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="scoreid" label="成绩编码" width="auto"></el-table-column>
      <el-table-column prop="userid" label="用户id" width="auto"></el-table-column>
      <el-table-column prop="gametyp" label="游戏类型" width="auto"></el-table-column>
      <el-table-column prop="score" label="分数" width="auto"></el-table-column>
      <el-table-column prop="date" label="日期" width="auto">
        <template slot-scope="scope">
          <span>{{scope.row.date | dateFilter}}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="date" label="日期" width="auto"></el-table-column> -->
    </el-table>

    <div class="block">
      <el-pagination
        @current-change="changePage"
        layout="prev, pager, next"
        size="5"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      total: undefined,
      formInline: {},
      tableData: [],
      allScore: [],
    };
  },
  created() {
    this.getMsg();
  },

  methods: {
    getMsg() {
      this.gGet("/game/getscore", {
        userid: sessionStorage.getItem("loginMsg"),
      }).then((res) => {
        this.allData = JSON.parse(JSON.stringify(res.data));
        this.tableData = res.data.slice(0, 10);
        this.total = res.data.length;
      });
    },
    onSearch() {
      this.formInline.userid = sessionStorage.getItem("loginMsg");
      this.gGet("/game/searchscore", this.formInline).then((res) => {
        this.allData = JSON.parse(JSON.stringify(res.data));
        this.tableData = res.data.slice(0, 10);
        this.total = res.data.length;
      });
    },

    // 执行分页操作
    changePage(val) {
      this.tableData = this.allData.slice((val - 1) * 10, val * 10);
    },

    reset() {
      this.getMsg();
      this.formInline = {};
    },
  },
};
</script>

<style scoped>
.block {
  margin-top: 100px;
}
</style>